<script setup>
import { ref, onMounted } from "vue";
let input = ref("");
//实例
let ws = null;

//每个窗口 id
let userId = ref("");

//消息列表
let msgList = ref([]);

//聊天窗口dom
let box = ref(null);

//房间id
let roomId = ref("");

onMounted(() => {
  //打开窗口的id
  userId.value = parseInt(Math.random() * 10000);
  newSocket();
});

let newSocket = () => {
  ws = new WebSocket("ws://192.168.32.174:3000?userId=" + userId.value);

  ws.addEventListener("open", (e) => {
    console.log("正在连接中...", e);
    if (e.currentTarget.readyState == 1) {
      console.log("服务已连接");
    }
  });

  ws.addEventListener("message", (e) => {
    console.log(e);
    let data = JSON.parse(e.data);
    if (userId.value != data.userId) {
      msgList.value.push(data);
    }
  });

  ws.addEventListener("close", (e) => {
    console.log("断开连接", e);
  });

  ws.addEventListener("error", (e) => {
    console.log("异常", e);
  });
};

//发送消息
let sendMsg = () => {
  if (!input.value) return;
  let data = {
    userId: userId.value,
    message: input.value,
    in: false,
  };
  msgList.value.push(data);
  ws.send(JSON.stringify(data));
  input.value = "";
};

let send = (e) => {
  console.log(e);
  let keyCode = e.keyCode;
  if (!input.value) return;
  if (keyCode == 13) {
    let data = {
      userId: userId.value,
      message: input.value,
      in: false,
    };
    msgList.value.push(data);
    ws.send(JSON.stringify(data));
    input.value = "";
  }
};
</script>

<template>
  <div class="userId">用户：{{ userId }} 房间号：{{ roomId }}</div>
  <div class="title">简易聊天室</div>
  <div class="addRoom">
    <el-input v-model="roomId" style="width: 90%" placeholder="请输入房间号" />
    <el-button type="primary" @click="sendMsg">加入群聊房间</el-button>
  </div>
  <div class="box" ref="box">
    <div
      v-for="(t, i) in msgList"
      :key="i"
      :class="userId == t.userId ? 'myStyle' : 'thStyle'">
      <div v-if="!t.in" class="hasMessage">
        <div v-if="userId == t.userId">{{ t.message }}</div>
        <div class="user">{{ t.userId }}</div>
        <div v-if="userId != t.userId">{{ t.message }}</div>
      </div>
      <div v-if="t.in" class="prompt">{{ t.message }}</div>
    </div>
  </div>
  <div class="inputBox">
    <el-input
      v-model="input"
      style="width: 90%"
      placeholder="Please input"
      @keydown="send" />
    <el-button type="primary" @click="sendMsg">发送</el-button>
  </div>
</template>

<style scoped>
.addRoom {
  display: flex;
  margin: 20px 0;
}
.title {
  font-size: 50px;
  color: red;
  font-weight: bold;
  margin-bottom: 30px;
}
.box {
  width: 60vw;
  height: 40vh;
  overflow-y: scroll;
  border: 1px solid red;
  border-radius: 10px;
  scrollbar-width: none;
  padding: 20px;
}
.inputBox {
  margin-top: 20px;
  width: 100%;
}

.myStyle {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}

.thStyle {
  display: flex;
  margin: 10px 0;
}

.user {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 14px;
  margin: 0 10px;
}

.userId {
  font-size: 40px;
}

.prompt {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 12px;
}

.hasMessage {
  display: flex;
  align-items: center;
}
</style>
